import React, {Component} from 'react';
import './index.css';
import {InputNumber, Slider, Radio} from 'antd';
import ColorPicker from '../../common/colorPicker/index';
import BaseOpts from '../BaseOpts';
import LinkWhere from '../../common/linkWhere/index';
import SlideInput from '../../common/SlideInput/index';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

class MTextOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {
                text: '',
                linkData: null,
            }
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
        };
    }

    render() {
        var {style, dataset} = this.state.data;
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);
        var paddingLeft = parseFloat(style.paddingLeft || 10);
        var lineHeight = parseFloat(style.lineHeight || 20);

        return (
            <div className="optsPanel">

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">文本内容</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <textarea
                                className="optsPanel__item__textarea"
                                placeholder="请输入文本内容"
                                defaultValue={dataset.text}
                                onChange={(e) => {
                                    this.$dataChange('text', e.target.value)
                                }}
                            >
                            </textarea>
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">文本样式</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <div className="mTextOpts__styles">
                                <div className="mTextOpts__styles__item">
                                    <ColorPicker color={style.color || '#000'} onChangeComplete={(color, rgba) => {
                                        this.$dataChange('color', rgba, 'style');
                                    }}/>
                                </div>
                                <div className="mTextOpts__styles__item">
                                    <span
                                        className={['fontSytle_btn fontSytle__bold', style.fontWeight ? 'fontSytle_btn_active' : ''].join(' ')}
                                        onClick={() => {
                                            var data = this.state.data;
                                            var style = data.style;

                                            this.$dataChange('fontWeight', style.fontWeight == 'bold' ? '' : 'bold', 'style');
                                        }}
                                    >粗体</span>
                                    <span
                                        className={['fontSytle_btn', style.fontStyle == 'italic' ? 'fontSytle_btn_active' : ''].join(' ')}
                                        onClick={() => {
                                            var data = this.state.data;
                                            var style = data.style;

                                            this.$dataChange('fontStyle', style.fontStyle == 'italic' ? '' : 'italic', 'style');
                                        }}
                                    >斜体</span>
                                    <span
                                        className={['fontSytle_btn', style.textDecoration == 'underline' ? 'fontSytle_btn_active' : ''].join(' ')}
                                        onClick={() => {
                                            var data = this.state.data;
                                            var style = data.style;

                                            this.$dataChange('textDecoration', style.textDecoration == 'underline' ? 'none' : 'underline', 'style');
                                        }}
                                    >下划线</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">文字大小</label>
                    <div className="optsPanel__item__bd">
                        <div className="mTextOpts__styles__item">
                            <InputNumber
                                min={1}
                                value={style.fontSize || '14'}
                                onChange={(val) => {
                                    this.$dataChange('fontSize', val + 'px', 'style');
                                }}
                            />
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">背景颜色</label>
                    <div className="optsPanel__item__bd">
                        <ColorPicker color={style.backgroundColor || '#fff'} onChangeComplete={(color, rgba) => {
                            this.$dataChange('backgroundColor', rgba, 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">位置</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup
                            onChange={(e) => {
                                this.$dataChange('textAlign', e.target.value, 'style');
                            }}
                            defaultValue={style.textAlign || 'left'}
                        >
                            <RadioButton value="left">居左</RadioButton>
                            <RadioButton value="center">居中</RadioButton>
                            <RadioButton value="right">居右</RadioButton>
                        </RadioGroup>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">行高</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={1} max={100} defaultValue={20} value={lineHeight} onChange={(val) => {
                            this.$dataChange('lineHeight', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">左右内边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} defaultValue={10} value={paddingLeft}
                                    onChange={(val) => {
                                        this.$dataChange(['paddingLeft', 'paddingRight'], [val + 'px', val + 'px'], 'style');
                                    }}
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item optsPanel__item_start">
                    <label className="optsPanel__item__hd">链接至</label>
                    <div className="optsPanel__item__bd">
                        <LinkWhere
                            onSelected={this._selected.bind(this)}
                            defaultLinkData={dataset.linkData}
                            defaultLinkType={dataset.linkType}
                        />
                    </div>
                </div>

            </div>
        );
    }

    _selected(linkData, linkType) {
        var data = this.state.data;

        data['dataset']['linkData'] = linkData;
        data['dataset']['linkType'] = linkType;

        this.setState({
            data
        });

        this.props.dataChange && this.props.dataChange(data);
    }
}

export default MTextOpts;
